<template>
	<view class="content">
		<view class="dating-list">
			<view class="dating-item" v-for="(item, index) in list" :key="index" @click="openLive(item)">
				<template v-if="item.type == 2">
					<view class="type-wrap type2">
						<text>专属</text>
					</view>
				</template>
				<template v-if="item.type == 3">
					<view class="type-wrap type3">
						<text>保爱</text>
					</view>
				</template>
				<view class="user-wrap">
					<image class="cover-image" :src="getCoverImage(item)" mode="widthFix"></image>
					<view class="user-info">
						<view class="info">
							<view class="age">{{getCoverAge(item)}}岁</view>
							<view class="city">
								<image class="city-icon" src="/static/img/location1.png" mode=""></image>
								<text>{{getCoverCity(item)}}</text>
							</view>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				<view class="matchmaker-wrap">
					<image class="avatar" :src="getAvatarUrl(item.user.avatar)" mode="aspectFill"></image>
					<text class="name">{{item.user.name}}</text>
				</view>
			</view>
			<view v-if="isEmpty" class="empty-wrap">
				<image class="empty-icon" src="/static/img/empty.png" mode=""></image>
				<text class="empty-text">暂无数据</text>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				type: '',
				myInfo: {
					sex: '1',
				},
				rose: 20,
				info: {},
				isEmpty: false,
				list: [],
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '加载更多',
					contentrefresh: '加载中',
					contentnomore: '木有了~'
				},
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '与你匹配'
			})
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.log(e)
			}
		},
		onReady() {
			
		},
		onShow() {
			this.list = getApp().globalData.like_list
		},
		methods: {
			getCoverImage: function (item) {
				let userAvatar = item.user.avatar.indexOf(this.QINIUURL) == -1 ? item.user.avatar : item.user.avatar + '?imageView2/1/w/300/h/300';
				let guestAvatar = '';
				let manuserAvatar = '';
				if (!!item.guest) {
					guestAvatar = item.guest.avatar.indexOf(this.QINIUURL) == -1 ? item.guest.avatar : item.guest.avatar + '?imageView2/1/w/300/h/300'
				}
				if (!!item.manuser) {
					manuserAvatar = item.manuser.avatar.indexOf(this.QINIUURL) == -1 ? item.manuser.avatar : item.manuser.avatar + '?imageView2/1/w/300/h/300'
				}
				if (this.myInfo.sex == 1) {
					return !!item.guest ? guestAvatar : userAvatar
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? manuserAvatar : userAvatar
				}
			},
			
			getCoverAge: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.age : item.user.age
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.age : item.user.age
				}
			},
			
			getCoverCity: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.city : item.user.city
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.city : item.user.city
				}
			},
			
			getCoverName: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.name : item.user.name
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.name : item.user.name
				}
			},
			
			getAvatarUrl: function (url) {
				if (url.indexOf(this.QINIUURL) == -1) {
					return url;
				} else {
					return url + '?imageView2/1/w/100/h/100';
				}
			},
			
			openLive: async function (item) {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return false;
				}
				// #endif
				if (item.type == 1 || item.type == 3) {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V1.LoveDetail',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						id: item.id
					}, res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
						if (res.status) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + res.data.rome.id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('------>申请加群', imResponse.data)
							}).catch(imError => {
								console.warn('------>申请加群失败', imError);
							});
							getApp().globalData.invite_list = res.data.list;
							let live = {
								room: {
									id: res.data.rome.id,
									name: res.data.rome.name,
								},
								character: 'audience',
								rose: res.data.rose,
								url: res.data.play,
								count: res.data.list.length,
								ratio: res.data.ratio,
								gift: {
									id: res.data.gift.id,
									name: res.data.gift.name,
									file: res.data.gift.file,
									rose: res.data.gift.rose
								},
								anchor: {
									id: res.data.rome.user.id,
									name: res.data.rome.user.name,
									avatar: res.data.rome.user.avatar,
									sex: res.data.rome.user.sex,
									age: res.data.rome.user.age,
									city: res.data.rome.user.city,
								},
								type: item.type
							}
							uni.navigateTo({
								url: '../live/live_room?live=' + encodeURIComponent(JSON.stringify(live))
							});
						}
					}, err => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后再试',
							position: 'bottom',
							icon: 'none'
						});
					})
				}
				if (item.type == 2) {
					let modal_content = '';
					if (this.myInfo.sex == '1') {
						modal_content = '专属相亲只允许申请后上台\n(上台后将消耗'+this.rose+'米币/分钟)'
					}
					if (this.myInfo.sex == '2') {
						modal_content = '专属相亲只允许申请后上台'
					}
					uni.showModal({
						title: '',
						content: modal_content,
						success: res => {
							if (res.confirm) {
								let custom_ext = {
									roomid: item.id,
									id: this.myInfo.id,
									name: this.myInfo.name,
									avatar: this.myInfo.avatar,
									sex: this.myInfo.sex,
									age: this.myInfo.age,
									city: this.myInfo.city
								}
								let message = this.$tim.createCustomMessage({
									to: this.IDBEFORE + item.user.id,
									conversationType: this.TIM.TYPES.CONV_C2C,
									payload: {
										data: 'ApplicationJoin',
										description: '专属相亲申请上麦',
										extension: JSON.stringify(custom_ext)
									}
								});
								this.$tim.sendMessage(message).then(imResponse => {
									console.log('专属相亲申请上麦消息发送成功', imResponse);
									uni.showToast({
										title: '申请已提交，请耐心等待',
										position: 'bottom',
										icon: 'none'
									});
								}).catch(imError => {
									console.warn('专属相亲申请上麦消息发送失败', imError);
								});
							}
						}
					});
				}
			},
			
			// #ifdef APP-PLUS
			checkPermission: async function () {
				let permissionList = ['camera', 'audio'];
				let status = 0;
				let cameraStatus = 0;
				let recordStatus = 0;
				for (let i = 0; i < permissionList.length; i++) {
					if (permissionList[i] == 'camera') {
						cameraStatus = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');
						console.log(cameraStatus)
						if (cameraStatus === null || cameraStatus === 1) {
							cameraStatus = 1;
						} else {
							uni.showModal({
								content: "需要摄像头权限",
								confirmText: "设置",
								success: function(res) {
									if (res.confirm) {
										permision.gotoAppSetting();
									}
								}
							})
						}
					}
					if (permissionList[i] == 'audio') {
						recordStatus = permision.isIOS ? await permision.requestIOS('record') : await permision.requestAndroid('android.permission.RECORD_AUDIO');
						console.log(recordStatus)
						if (recordStatus === null || recordStatus === 1) {
							recordStatus = 1;
						} else {
							uni.showModal({
								content: "需要麦克风权限",
								confirmText: "设置",
								success: function(res) {
									if (res.confirm) {
										permision.gotoAppSetting();
									}
								}
							})
						}
					}
				}
				if (cameraStatus === 1 && recordStatus === 1) {
					status = 1
				}
				return status;
			},
			// #endif
			
		},
		filters: {
			// timeFormat: function (value) {
			// 	let now = new Date().getTime();
			// 	let	oldTime = new Date(value.replace(/-/g, '/')).getTime();
			// 	return util.dateUtils.humanize(now - oldTime);
			// },
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.search-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20rpx;
		background: #fff;
		padding: 0 40rpx 0 20rpx;
		border-radius: 60rpx;
		.uni-icon {
			font-size: 36rpx;
			color: #666666;
		}
		.input {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			height: 60rpx;
			padding: 0 10rpx;
			input {
				flex: 1;
				font-size: 28rpx;
			}
		}
	}
	.dating-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 5px 0;
	}
	.dating-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 370rpx;
		box-sizing: border-box;
		position: relative;
		.type-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
			&.type2 {
				background-color: #927ac3;
			}
			&.type3 {
				background-color: #ED4574;
			}
			text {
				font-size: 18rpx;
				color: #fff;
			}
		}
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 10rpx;
			.cover-image {
				width: 360rpx;
				height: 360rpx;
				border-radius: 10rpx;
			}
			.user-info {
				width: 100%;
				height: 100rpx;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				.info {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 20rpx;
					.age {
						font-size: 30rpx;
						color: #fff;
						margin-right: 10rpx;
					}
					.city {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.city-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						text {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
				.name {
					padding: 0 20rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
		.matchmaker-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: 10rpx;
			}
			.name {
				width: 280rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	.friends-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 370rpx;
		box-sizing: border-box;
		position: relative;
		.peoples {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5rpx 20rpx;
			background-color: rgba(0,0,0,0.6);
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
			.peoples-icon {
				width: 20rpx;
				height: 20rpx;
				margin-right: 5rpx;
			}
			text {
				font-size: 18rpx;
				color: #fff;
			}
		}
		.matchmaker-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 10rpx;
			.cover-image {
				width: 360rpx;
				height: 360rpx;
				border-radius: 10rpx;
			}
			.room-info {
				width: 100%;
				height: 100rpx;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				.title {
					padding: 0 20rpx;
					font-size: 30rpx;
					color: #fff;
				}
				.name {
					padding: 0 20rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
		.member-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			position: relative;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #fff;
				border-radius: 60rpx;
				position: absolute;
				&.avatar0 {
					left: 10rpx;
					top: 0;
					z-index: 7;
				}
				&.avatar1 {
					left: 50rpx;
					top: 0;
					z-index: 6;
				}
				&.avatar2 {
					left: 90rpx;
					top: 0;
					z-index: 5;
				}
				&.avatar3 {
					left: 130rpx;
					top: 0;
					z-index: 4;
				}
				&.avatar4 {
					left: 170rpx;
					top: 0;
					z-index: 3;
				}
				&.avatar5 {
					left: 210rpx;
					top: 0;
					z-index: 2;
				}
				&.avatar6 {
					left: 250rpx;
					top: 0;
					z-index: 1;
				}
			}
		}
	}
</style>
